<template>
  <view class="count-down-wrap" :style="{...commonStyle}">
    <slot name="content" :countDown="countDown">
      <template v-if="showDay">
        <text>{{ countDown.days }}</text>
        <text>{{ delimiter[0] }}</text>
        <text>{{ countDown.hours }}</text>
        <text>{{ delimiter[1] }}</text>
        <text>{{ countDown.minutes }}</text>
        <text>{{ delimiter[2] }}</text>
        <text>{{ countDown.seconds }}</text>
        <text>{{ delimiter[3] }}</text>
        <template v-if="showMillisecond">
          <text>{{ formatMilliseconds(countDown.milliseconds) }}</text>
          <text>{{ delimiter[4] }}</text>
        </template>
      </template>
      <template v-else>
        <text>{{ countDown.hours }}</text>
        <text>{{ delimiter[0] }}</text>
        <text>{{ countDown.minutes }}</text>
        <text>{{ delimiter[1] }}</text>
        <text>{{ countDown.seconds }}</text>
        <text>{{ delimiter[2] }}</text>
        <template v-if="showMillisecond">
          <text>{{ formatMilliseconds(countDown.milliseconds) }}</text>
          <text>{{ delimiter[4] }}</text>
        </template>
      </template>
    </slot>
  </view>
</template>
<script>
import { countDownBytimeStamp, countDownHMSMBytimeStamp  } from '/uni_modules/hbxw-utils/js_sdk/hbxw-utils.js';

export default {
  props: {
    // 开始时间
    start: {
      type: [String, Number],
      default: ''
    },
    // 结束时间
    end: {
      type: [String, Number],
      default: ''
    },
    // 自定样式
    commonStyle: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 是否展示天
    showDay: {
      type: Boolean,
      default: true
    },
    // 是否展毫秒
    showMillisecond: {
      type: Boolean,
      default: false
    },
    // 倒计时时间间隔
    interval: {
      type: Number,
      default: 1000
    },
    // 倒计时分隔符
    delimiter: {
      type: Array,
      default: function() {
        return ['天',':',":", ':', '']
      }
    }
  },
  data() {
    return {
      countDown: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        milliseconds: 0
      }
    }
  },
  mounted() {
    // 处理Safari浏览器兼容性问题
    const parseDate = (date) => {
      if (!date) return new Date();
      if (typeof date === 'string' && /^\d+$/.test(date.trim())) {
        return new Date(Number(date));
      }
      if (typeof date === 'string' && date.includes('-') && !date.includes('T')) {
        return new Date(date.replace(/-/g, '/'));
      }
      return new Date(date);
    };

    const startDate = parseDate(this.start);
    const endDate = parseDate(this.end);

    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {

      this.countDown = {
        days: 'NA',
        hours: 'NA',
        minutes: 'NA',
        seconds: 'NA',
        milliseconds: 'NA'
      };
      return;
    }

    this.diffVal = endDate - startDate;
    this.timer = null;
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.timer = setTimeout(() => {
        this.countDown = this.showDay ? countDownBytimeStamp(this.diffVal, true) : countDownHMSMBytimeStamp(this.diffVal, true);
        // let interval = JSON.parse((JSON.stringify(this.interval)))

        this.diffVal -= this.interval;
        // console.log(this.diffVal,'this.diffVal')
        this.$emit('count', {
          diffVal: this.diffVal,
          countDown: this.countDown
        });
        if (this.diffVal < 0) {
          clearTimeout(this.timer);
          this.$emit('end');
          return;
        }
        this.init();
      }, this.interval);
    },

    // 毫秒格式化
    formatMilliseconds(milliseconds) {
      return String(parseInt(99 - milliseconds / 100 * 99)).padStart(2, 0);
    }
  }
}
</script>
<style lang="scss" scoped>
.count-down-wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 32rpx;
  color: #333;
}
</style>
